@import "../mixins/mixins";
@import "../mixins/list-group";
@import "../mixins/badge";
@import "../mixins/button";
@import "../mixins/media";
@import "../mixins/message";
html,
body {
    width: 100%;
    height: 100%;
    >div {
        width: 100%;
        height: 100%;
    }
}

.left {
    float: left
}

.right {
    float: right
}

.chatbox {
    width: 100%;
    height: 100%;
    background: url(../../../assets/img/wood.jpg) repeat;
    padding-top: 5%;
    .chat-contrainer {
        padding: 0px;
        min-width: 600px;
        //      border: 1px solid red;
        @include box-shadow(0px 0px 15px 0px #fff);
        height: 80%;
        min-height: 500px;
        .chat-side {
            float: left;
            width: 250px;
            height: 100%;
            position: relative;
            background: #2e3238;
            //个人信息
            .me-info {
                padding: 15px 15px;
                color: #fff;
                .me-head {
                    width: 60%;
                    font-size: 18px;
                    img {
                        display: inline;
                        width: 50px;
                        height: 50px;
                        @include radius(5px);
                    }
                }
                .operation {
                    width: 40%;
                    text-align: right;
                    .dropdown-toggle {
                        cursor: pointer;
                    }
                    .dropdown-menu {
                        >li {
                            color: #000;
                            padding: 0px 15px;
                            cursor: pointer;
                            &:hover {
                                color: #21a0e8;
                            }
                        }
                    }
                }
            }
            .search {
                padding: 0px 15px;
                .input-group {
                    >span {
                        background: transparent;
                        border-color: grey;
                        border-right: 0px;
                        border-top-left-radius: 30px;
                        border-bottom-left-radius: 30px;
                    }
                    >input {
                        border-left: 0px;
                        border-color: grey;
                        background: transparent;
                        border-top-right-radius: 30px;
                        border-bottom-right-radius: 30px;
                        color: #fff;
                        &:focus {
                            outline: none;
                            @include shadow(0px 0px 0px)
                        }
                    }
                }
            }
            .tabBox {
                margin-top: 10px;
                height: 100%;
                .tab-content {
                    height: 100%;
                    .nav-tab {
                        padding: 15px;
                        margin: 0px;
                        padding: 0px;
                        list-style-type: none;
                        display: flex;
                        line-height: 35px;
                        text-align: center;
                        border-bottom: 1px solid grey;
                        >li {
                            flex: 1;
                            a {
                                color: #fff;
                            }
                        }
                        .active {
                            a {
                                color: #74777b;
                            }
                        }
                    }
                    .tab-pane {
                        //群列表
                        height: calc(100% - 160px);
                        overflow-y: auto;
                        overflow-x: none;
                        .crowd-one,
                        .crowd-two {
                            height: 100%;
                            width: 40%;
                            background: #202228;
                            .list-group {
                                @include list-group(#2E323A, 10px, 15px, #202228);
                            }
                        }
                        .crowd-two {
                            width: 60%;
                            background: #2E323A;
                            .list-group {
                                @include list-group(#202228, 10px, 15px, #2E323A);
                            }
                            .media {
                                @include medias(grey, 40px, 12px, 70px);
                                padding: 8px 15px;
                            }
                        }
                        .media {
                            @include medias(grey, 50px, 16px);
                            padding: 10px 15px;
                        }
                    }
                }
            }
        }
        .chat-window {
            float: left;
            width: calc(100% - 250px);
            height: 100%;
            background: #fff;
            display: flex;
            .chatRecord {
                flex: 1;
                height: 100%;
                border-left: 1px solid #eee;
                display: none;
                position: relative;
                .recordTitle {
                    border-bottom: 1px solid #E5E5E5;
                    height: 50px;
                    padding: 15px;
                    text-align: center;
                    background: #fff;
                    z-index: 2;
                    position: relative;
                }
                &.show {
                    display: block;
                }
                .recordCont {
                    height: 100%;
                    z-index: 1;
                    top: 0px;
                    position: absolute;
                    width: 100%;
                    padding-top: 50px;
                    padding-bottom: 30px;
                    @include message();
                    background: #eee;
                    overflow-y: auto;
                }
                .recordPage {
                    position: absolute;
                    bottom: 0px;
                    height: 30px;
                    width: 100%;
                    text-align: center;
                    background: #fff;
                    z-index: 2;
                }
            }
            .chatView {
                height: 100%;
                flex: 1;
                .chat-title {
                    //聊天标题
                    border-bottom: 1px solid #E5E5E5;
                    height: 50px;
                    padding: 15px;
                    .dropdown {
                        cursor: pointer;
                        width: 25%;
                        margin: 0px auto;
                        text-align: center;
                        .media {
                            @include medias(#e5e5e5, 30px, 14px, 100%, #fff, #000);
                        }
                    }
                }
                .chat-box {
                    //聊天容器
                    width: 100%;
                    height: calc(100% - 220px);
                    overflow-y: auto;
                    @include message();
                }
                .chat-tool {
                    //聊天工具栏
                    height: 30px;
                    border-top: 1px solid #eee;
                    line-height: 30px;
                    padding: 0px 10px;
                    .icon {
                        float: left;
                        margin: 0px 5px;
                        height: 100%;
                        position: relative;
                        //                  overflow: hidden;
                        i {
                            color: #CCCCCC;
                            cursor: pointer;
                            &:hover {
                                color: #4eb1f4;
                            }
                        }
                        input[type="file"] {
                            font-size: 100%;
                            position: absolute;
                            top: 0px;
                            left: 0px;
                            @include opacity(0);
                            z-index: -1;
                        }
                        .RecordBtn {
                            display: inline-block;
                            cursor: pointer;
                            padding: 0px 10px;
                            @include radius(5px);
                            &:hover,
                            &.active {
                                color: #4eb1f4;
                                background: #eee;
                            }
                        }
                        .sendMsg_icon {
                            width: 18px;
                            height: 100%;
                            display: block;
                            position: relative;
                            cursor: pointer;
                            background: url(../../../assets/img/doctor_pre.png) no-repeat center;
                            background-size: 100%;
                            .sendNote {
                                display: none;
                                background: #fff;
                                left: 10px;
                                top: 80%;
                                position: absolute;
                                border: 1px solid #E5E5E5;
                                box-shadow: 0px 0px 5px 1px #E5E5E5;
                                width: 500px;
                                padding: 0px 15px;
                                li {
                                    list-style: none;
                                    border-bottom: 1px solid #E5E5E5;
                                    color: #666;
                                    line-height: 35px;
                                    font-family: "微软雅黑";
                                    font-size: 14px;
                                    a {
                                        display: none;
                                        color: #4eb1f4;
                                        text-decoration: none;
                                    }
                                    &:hover {
                                        color: #000;
                                        a {
                                            display: inline;
                                        }
                                    }
                                    &:last-child {
                                        border: 0px;
                                    }
                                }
                            }
                            &:hover {
                                background: url(../../../assets/img/doctor_next.png) no-repeat center;
                                background-size: 100%;
                                .sendNote {
                                    display: block;
                                }
                            }
                        }
                        .patient {
                            background: url(../../../assets/img/patient_pre.png) no-repeat center;
                            background-size: 100%;
                            &:hover {
                                background: url(../../../assets/img/patient_next.png) no-repeat center;
                                background-size: 100%;
                            }
                        }
                        //                  &:first-child~icon {
                        //                      width: 25px;
                        //                      height: 25px;
                        //                      border: 1px solid red;
                        //                      background: url(../../../assets/img/doctor_pre.png);
                        //                  }
                    }
                }
                .chat-input {
                    //聊天输入框
                    height: 140px;
                    textarea {
                        width: 100%;
                        resize: none;
                        height: 100px;
                        border: 1px solid #eee;
                        &:focus {
                            outline: none;
                        }
                    }
                }
                .chat-operation {
                    text-align: right;
                    padding: 0px 15px;
                    button {
                        @include data-btn(auto, 30px, #21a0e8);
                    }
                }
            }
        }
    }
}